<template>
  <div class="home">
  
    <div class="banner wrap">
      <!-- <img src="../assets/img/banner.f559b49d.png" alt="" /> -->
      <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="../assets/img/banner.f559b49d.png" alt="" /></div>
            <div class="swiper-slide"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01b9b159eabe43a801216a4b338079.jpg%402o.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1660228313&t=d6687841c0b0dace823ffd3d00f19209" /></div>
            <div class="swiper-slide"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01afbb554440dd0000019ae96ba243.jpg%402o.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1660228707&t=9ce827cf5c901c6597cf855e361ca5ee"  /></div>
            <!-- <div class="swiper-slide"><img src="https://img1.baidu.com/it/u=3320190961,818774514&fm=253&fmt=auto&app=138&f=JPEG?w=1280&h=400" alt="" /></div> -->
            <!-- <div class="swiper-slide"><img src="../assets/img/banner.f559b49d.png" alt="" /></div>
            <div class="swiper-slide"><img src="../assets/img/banner.f559b49d.png" alt="" /></div> -->
            
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        
      </div>
    </div>
    <div class="content">
      <div class="wrap">
        <JfTitle title1="精品推荐" :imgSrc="titImg1"></JfTitle>
        <List :arr="jingpinArr"></List>
        <JfTitle title1="热门兑换" :imgSrc="titImg2"></JfTitle>
        <img
          style="margin: 10px 0 30px 0"
          src="../assets/img/ad.4c6b6225.png"
          alt=""
        />
        <List :arr="remenArr"></List>
      </div>
    </div>
    <div class="wrap">
      <JfTitle title1="积分攻略" :imgSrc="titImg3"></JfTitle>
      <ul class="jifen">
        <li :style="{ backgroundImage: `url(${jifenImg1})` }">
          <h3>签到得鸡腿</h3>
          <div>去签到</div>
        </li>
        <li :style="{ backgroundImage: `url(${jifenImg2})` }">
          <h3>购课得鸡腿</h3>
          <div>去购课</div>
        </li>
        <li :style="{ backgroundImage: `url(${jifenImg3})` }">
          <h3>推荐得鸡腿</h3>
          <div>去推荐</div>
        </li>
        <li :style="{ backgroundImage: `url(${jifenImg4})` }">
          <h3>做任务得鸡腿</h3>
          <div>做任务</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import Swiper from "swiper";
import "swiper/css/swiper.min.css"
import JfTitle from "@/components/home/JfTitle";
import List from "@/components/home/List";
import {JinpinAPI,ReMenAPI} from "@/request/api"
export default {
  name: 'HomeView',
  components: { JfTitle, List},

  data() {
    return {
      titImg1: require("../assets/img/jingpin.png"),
      titImg2: require("../assets/img/hot.png"),
      titImg3: require("../assets/img/score.png"),
      jifenImg1: require("../assets/img/integral-01.9386d4bf.png"),
      jifenImg2: require("../assets/img/integral-02.150d92a1.png"),
      jifenImg3: require("../assets/img/integral-03.9870f3f1.png"),
      jifenImg4: require("../assets/img/integral-04.afadcbdf.png"),
      jingpinArr: [],
      remenArr: [],
    };
  },
  async created(){
  //解决回调地狱  async  await      promise对象       await new Promise()        await xxx()
    let jinpinRes = await JinpinAPI()
    this.jingpinArr = jinpinRes.data.data.records
    // console.log(this.jingpinArr)
    let remenRes = await ReMenAPI()
    // console.log(remenRes)
    this.remenArr = remenRes.data.data.records
  },
  updated(){
    new Swiper ('.swiper-container', {
      // direction: 'vertical', // 垂直切换选项
      loop: true, // 循环模式选项
      
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
      },
      
      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      
      // loop: true,
      autoplay:{
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: false,
      },
      // loopAdditionalSlides: 5,
      effect: 'fade',
      mousewheel: true,
    }) 
  }
}
</script>

<style lang="less" scoped>
.banner {
  padding-bottom: 30px;
}
.swiper-container {
    width: 1200px;
    height: 446px;
    margin: 0 auto;
}  
.content {
  background-color: #f5f5f5;
  padding-bottom: 30px;
}
.jifen {
  display: flex;
  justify-content: space-between;
  padding-bottom: 30px;
  li {
    width: 285px;
    height: 168px;
    color: #fff;
    padding: 20px 10px;
    box-sizing: border-box;
    cursor: pointer;
    transition: background-size 0.4s linear;
    background-size: 100% 100%;
    &:hover {
      background-size: 105% 105%;
    }
    h3 {
      font-size: 24px;
      margin-bottom: 19px;
    }
    div {
      width: 96px;
      height: 27px;
      border: 1px solid #ffffff;
      text-align: center;
      line-height: 27px;
    }
  }
}
</style>
